<template>
     
  <div class="Login_main">
    <div class="LoginBar">
            <div>Management</div>
        </div>
        <div style="width: 100%;height: 100px;"></div>
        <div style="width: 100%;height: 150px;"></div>
       <div class="LoginPannel">
          <div class="LoginBox">
            <div>Login</div>
          </div>
          <div class="Login_InputBox">
            <div>UserName:&nbsp;&nbsp;&nbsp;</div>
            <input class="Login_inputText" id="UserName">
          </div>
          <br>
          <br>
          <div class="Login_InputBox">
            <div>Password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <input class="Login_inputText" type="password" id="PassWord">
          </div>
          <br>
          <div class="Login_ButtonBox">
        <input type="button" class="button_Class" value="Login" @click="Login()">
       </div>
       </div>
    
  </div>
</template>

<script>
import axios  from 'axios';
export default {

data(){
  return{
    loginInfo:{
      UserName:"",
      PassWord:"",
    },
     _accessToken_:''
     }
},
 
methods:{
  Login(){
    
    this.loginInfo.UserName=document.getElementById("UserName").value;
    this.loginInfo.PassWord =document.getElementById("PassWord").value;
    console.log(this.loginInfo.UserName);
    console.log(this.loginInfo.PassWord);
    if(this.loginInfo.UserName == '' || this.loginInfo.PassWord == ''){
          alert("用户名与密码不能为空！");
          return;
    }
    else{
    axios.get('/api/auth/login',{
          // 传递的参数
          params: {
             UserName:this.loginInfo.UserName,
             PassWord:this.loginInfo.PassWord
          }
    
          }
).then((result) => {
          if(result.data.success){
              localStorage.setItem("accessToken",result.data._accessToken_);
              this.$router.replace('/SelfInfo')
              return;
          }
          else{
           alert(result.data.msg);
           return;
          }
    
            
        });
        }

  },

},
mounted(){

}}

</script>

<style lang="less">
@import "@/assets/word-like.less";
@import "@/assets/paper.less";
@import "@/assets/CSS/Login.css";

</style>